<script lang="ts" setup>
import { hBtns, UiDataView ,openModal, nameListStatusSelect, nameListTypeSelect} from '../../utils'
import { Delete, Plus } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { DataViewRef, PageFetchAction, TableCellBtn, TableColumnConfig } from '../../utils/types'
import { apiAccessControl } from '../../api';
import { ElTag } from 'element-plus';

const tableRef: DataViewRef = ref()

const columns = [
  { type: 'selection', width: 50 },
  { label: '规则名称', prop: 'name', minWidth: 120 },
  {
    label: '名单类型',
    minWidth: 100,
    render: (h, { row }) => nameListTypeSelect.getItem(row.type).label
  },
  { label: 'IP地址', prop: 'address', minWidth: 140 },
  {
    label: '状态',
    minWidth: 80,
    render (h, { row }) {
      const item = nameListStatusSelect.getItem(row.status)
      return h(ElTag, { type: item.type as any }, { default: () => item.label })
    }
  },
  { label: '最后修改', prop: 'createTime', minWidth: 170 },
  {
    label: '操作',
    fixed: 'right',
    width: 80,
    render (h, { row }) {
      return hBtns([
        { label: '修改', onClick: onEdit.bind(null, row) }
      ] as TableCellBtn[])
    }
  }
] as TableColumnConfig<any>[]

const fetchAction: PageFetchAction = params => {
  const { timerange, ...other } = params
  let [startTime, endTime] = timerange || []
  if (endTime) {
    startTime += ' 00:00:00'
    endTime += ' 23:59:59'
  }
  return apiAccessControl.pageList({ ...other, startTime, endTime })
}

const onDelete = (rows: any[]) => {
  tableRef.value.deleteRows(() => {
    return apiAccessControl.delete(rows.map(_ => _.id))
  })
}

const onEdit = (row?: any) => {
  openModal(() => import('./AccessStrategyEdit.vue'), {
    row,
    width: 600,
    title: `${row ? '编辑' : '新增'}`,
    onSubmitted () {
      tableRef.value.onSaveSuccess(row)
    }
  })
}

onMounted(() => {
  tableRef.value.getData()
})
</script>

<template>
  <UiDataView ref="tableRef" :columns="columns" :fetch-action="fetchAction">
    <template #search="{ form, onSearch }">
      <ElFormItem label="规则名称">
        <ElInput v-model="form.name" @keyup.enter="onSearch" />
      </ElFormItem>
      <ElFormItem label="状态">
        <ElSelect clearable v-model="form.status" @change="onSearch">
          <ElOption v-for="_ in nameListStatusSelect.data" :key="_.value" v-bind="_" />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="名单类型">
        <ElSelect clearable v-model="form.type" @change="onSearch">
          <ElOption v-for="_ in nameListTypeSelect.data" :key="_.value" v-bind="_" />
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="最后修改">
        <ElDatePicker
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          range-separator="至"
          value-format="YYYY-MM-DD"
          v-model="form.timerange"
          @change="onSearch" />
      </ElFormItem>
    </template>
    <template #actions="{ selectedRows }">
      <ElButton :icon="Plus" type="primary" @click="onEdit()">新增</ElButton>
      <ElButton
        type="danger"
        :icon="Delete"
        :disabled="selectedRows.length < 1"
        @click="onDelete(selectedRows)">删除</ElButton>
    </template>
  </UiDataView>
</template>
